<template>
  <div>
    <!-- classify
    <hr />
    <ul v-for="(item, index) in renderData" :key="index">
      <li>{{ item.name }}</li>
    </ul> -->
      <div style="margin-bottom: 15px;">
         <el-input placeholder="请输入内容" v-model="input" @keyup.enter.native="addClassify">
           <el-button slot="append" @click="addClassify" >新增</el-button>
         </el-input>
      </div>

      <el-table
      :data="classify"
      border
      stripe
      style="width: 100%">
      <el-table-column
      type="index"
      label="#"
      width="50">
    </el-table-column>
    <el-table-column
      prop="name"
      label="类别名"
    >
      <template slot-scope="scope">
        <div  v-if="scope.row.id==editClassifyData.id" >
          <el-input placeholder="请输入内容" style="width:400px"  v-model="editClassifyData.name"></el-input>
          <el-button type="warning" size="small" @click="saveClassify(scope.row)">保存</el-button>
          <el-button type="danger" size="small" @click="calClassify">取消</el-button>
        </div>
        <div  v-else>{{scope.row.name}}</div>
      </template>
    </el-table-column>
      
      <el-table-column
      fixed="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button  type="warning" size="small" @click="editClassify(scope.row)">修改</el-button>
        <el-button type="danger" size="small"   @click="deleteClassify(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from "vuex"

export default {
  // head(){
  //     return {title:"类别分类"}
  // },
  layout: "main",
  
  data() {
    return {
      input:"",
      editClassifyData:{}
    };
  },
  fetch({ $axios,store}){
     store.dispatch('classify/getClaccifyData', $axios)
     
  },
  computed:{
          ...mapState("classify",["classify"]),
  },
  methods:{
    // 保存
    saveClassify(val){
      // val.name=this.editClassifyData.name
      // console.log(val.name);
      this.$store.dispatch('classify/putClassify', {$axios:this.$axios ,data: this.editClassifyData})
      this.editClassifyData={}
    },
    // 取消
    calClassify(){
      this.editClassifyData={}
    },
    // 修改
    editClassify(val){
      this.editClassifyData=JSON.parse(JSON.stringify(val)) 
      // this.editClassifyData.name= val.name
    },
    // 新增
    addClassify(){ 
      this.$store.dispatch('classify/addClassifyData', {$axios:this.$axios,inpVal:this.input})
      this.input=''
    },
    //删除
    deleteClassify(id){
      if(confirm("确定删除吗")){
        this.$store.dispatch("classify/delClassifyData",{id,$axios:this.$axios})
        this.$message({
          showClose: true,
          message: '类别删除成功 ',
          type: 'success'
        });
      }
    }
  }
  // async asyncData({ $axios,store ,req, res, err }) {
  //   //每次组件加载的时候都会被调用
  //   try {
  //     let { data } = await $axios.get(
  //       "/userS/getUser/?pageSize=10"
  //     );
  //     // console.log(data.data);
  //     return {
  //       renderData: data.data,
  //     };
  //   } catch(e) {
  //       error( )
  //   }
  // },
  
};
</script>

<style scoped>
.edit {
  display: none;
}
</style>